<template>
  <div class="ArticleList">
    <ul class="ArticleList">
      <li v-for="(v, i) of list" :key="i">
        <!-- 发布者 -->
        <router-link :to="'/user/' + v.user.username" style="float: left"
          ><img class="ArticleList_left_img" :src="v.user.avatar" alt=""
        /></router-link>
        <span
          style="
            width: 70px;
            display: inline-block;
            text-align: center;
            float: left;
            line-height: 30px;
          "
        >
          <span style="color: #9e78c0">{{ v.replies.length }}</span>
          <span>/</span>
          <span style="font-size: 10px; color: #b4b4b4">{{
            v.view_count
          }}</span>
        </span>
        <!-- 回复者 -->
        <router-link
          :to="
            '/topic/' +
            v.origin_id +
            '/' +
            querys +
            '#' +
            v.replies[0].origin_id
          "
          style="float: right; line-height: 30px; margin-left: 20px"
          v-if="v.replies[0]"
        >
          <img
            class="ArticleList_rigth_img"
            style="margin-top: 6px; float: left"
            :src="v.replies[0].user.avatar"
            alt=""
          />
          <span class="ArticleList_rigth_span">{{
            analysisTime(v.replies[0].created_at)
          }}</span>
        </router-link>
        <router-link
          :to="'/topic/' + v.origin_id + '/' + querys"
          v-else
          style="float: right; line-height: 30px; margin-left: 20px"
        >
          <span class="ArticleList_rigth_span">{{
            analysisTime(v.created_at)
          }}</span>
        </router-link>
        <!-- 标题 -->
        <div class="ArticleList_div">
          <span class="ArticleList_div_span" v-if="v.is_top == 1"
            >置顶</span
          >
          <span
            class="ArticleList_div_span"
            v-if="querys == '0' && v.is_top != 1"
            >精选</span
          >
          <span
            v-if="querys == '00' && v.is_top != 1"
            class="ArticleList_div_span"
            style="background-color: #e5e5e5; color: #999"
            >{{ v.categorie.name }}</span
          >
          <router-link :to="'/topic/' + v.origin_id + '/' + querys">
            <span class="ArticleList_div_title">{{ v.title }}</span>
          </router-link>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "querys"],
  methods: {
    analysisTime(time) {
      const _d1 = new Date();
      const dateDiffer = Math.abs(_d1.getTime() - time);
      //准换年
      const year = Math.floor(dateDiffer / (1000 * 60 * 60 * 24 * 365));
      //取余数
      const years = dateDiffer % (1000 * 60 * 60 * 24 * 365);
      //将余数转换成月
      const month = Math.floor(years / (1000 * 60 * 60 * 24 * 30));
      //将余数转换成天
      const day = Math.floor(years / (1000 * 60 * 60 * 24));
      //取余数
      const hours = years % (1000 * 60 * 60 * 24);
      //将余数转换小时
      const hour = Math.floor(hours / (1000 * 60 * 60));
      // console.log(year,month,day,hour);
      if (year > 0) {
        return year + "年前";
      } else if (month > 0) {
        return month + "个月前";
      } else if (day > 0) {
        return day + "天前";
      } else if (hour > 0) {
        return hour + "小时前";
      } else {
        return "1小时之前";
      }
    },
  },
};
</script>

<style>
.ArticleList {
  list-style: none;
  line-height: 2em;
}
.ArticleList li {
  border-top: 1px solid #f0f0f0;
  padding: 10px 10px 10px 10px;
  font-size: 14px;
  /* clear: both; */
}
.ArticleList li:nth-child(1) {
  border-top: none;
}
.ArticleList_left_img {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  float: left;
}
.ArticleList_rigth_img {
  height: 18px;
  width: 18px;
  border-radius: 3px;
}
.ArticleList_rigth_span {
  text-align: right;
  color: #778087;
  font-size: 11px;
  min-width: 64px;
  display: inline-block;
  white-space: nowrap;
}
.ArticleList_div {
  /* background: #a2a799; */
  margin-left: 100px;
  max-width: 85%;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}
.ArticleList_div_span {
  background: #80bd01;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  color: #fff;
  margin-right: 5px;
  font-size: 12px;
}
</style>